<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no" />
		<title>Document</title>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<link rel="stylesheet" href="./css/login.css">
	</head>

	<body>
		<header></header>

		<div class="modal show" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
			style="position: absolute;top: 74px;">
			<div class="modal-dialog" style="top: 30%;">
				<div class="modal-content">
					<div class="modal-body">

						<form id="myform01" action="" method="POST" class="form-horizontal" role="form">
							<div class="form-group text-center">
								<legend>欢迎来到我的世界！</legend>
							</div>

							<div class="form-group">
								<label for="account" class="col-sm-2 control-label">手机号</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="account" name="phone"
										placeholder="phone" value="12345678910" required minlength="11" maxlength="11">
								</div>
							</div>

							<div class="form-group">
								<label for="password" class="col-sm-2 control-label">密码</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" id="password" name="password"
										placeholder="password" value="admin" required minlength="5" maxlength="12">
								</div>
							</div>

							<div class="form-group">
								<div class="col-sm-3 col-sm-offset-9">
									<button onclick="zhuce()" type="button" class="btn btn-default">注册</button>
									<button type="submit" class="btn btn-primary">登录</button>
								</div>
							</div>
						</form>

					</div>
				</div>
			</div>
		</div>

		<!--footer-->
		<footer></footer>
		<!--footer-->


		<script src="./js/jquery.min.js"></script>
		<script src="./js/headerAndFooter.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/my_connect.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function zhuce() {
				location.href = "register.html";
			}
			$("#myform01").validate({
				debug:true,
				rules:{
					phone:{
						required: true,
						minlength: 11
					},
					password: {
						required: true,
						rangelength: [6, 10]
					}
				},
				messages:{
					phone:{
						required: "手机号不可以为空",
						minlength: "手机号码长度是11位"
					},
					password: {
						required: "密码不可以为空",
						rangelength: "密码长度6到8位"
					}
				},
				submitHandler: async function(form) {
					//form.submit();表单进行提交
					//登陆 发送给后端
					let tell = $(form).find("#account").val();
					let password = $(form).find("#password").val();
					let res = await ($$.login({tell,password}));
					if (res.status) {
						alert("登陆成功");
						
						//将登陆成功的数据记录在浏览器中 方便以后使用
						localStorage.setItem("token",res.token);
						localStorage.setItem("user",res.user);
						localStorage.setItem("tell",res.tell);
						//token是根据用户的用户名和密码进行一定规则加密后的唯一值
						location.href = "index.html";
					} else{
						alert("登陆失败，电话号码或密码不正确!");
						$(form).find("#account").val("");
						$(form).find("#password").val("");
					}
				}
			})
		</script>
	</body>

</html>
